<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KMeans</title>
</head>

<body>
    <a>Input: </a>
    <input type="text" id="array" value="" style="width:800px;" />
    <br />
    <a>MaxDiffThreshold: </a>
    <input type="text" id="threshold" value="15" />
    <br />
    <input type="button" id="btn" value="KMeans" />
    <div>
        <a id="result"></a>
    </div>
    <script src="KMeans.js"></script>
    <script>
        var textDom = document.getElementById( "array" );
        var thresholdDom = document.getElementById( "threshold" );

        var count = 30;
        var data = [];
        for ( let i = 0; i < count; i++ ) {
            data.push( Math.round( Math.random() * 100 ) );
        }
        textDom.value = data.join( ',' );

        var kmeans = new KMeans();
        kmeans.meanCalcFunc = function ( members ) {
            var sum = 0;
            members.forEach( m => sum += m );
            return sum / members.length;
        }
        kmeans.diffCalcFunc = function ( a, b ) {
            return Math.abs( a - b );
        }

        var btnDom = document.getElementById( "btn" );
        btnDom.addEventListener( "click", () => {

            var maxThreshold = Number.parseFloat( thresholdDom.value );

            var result = kmeans.clusterize( data, maxThreshold );
            var str = "";
            for ( let i = 0; i < result.length; i++ ) {
                const cluster = result[ i ];
                str += `Cluster - Center: ${ cluster.center } | Members: ${ cluster.members.join( "," ) } \n`;
            }
            document.getElementById( "result" ).innerText = str;
        } );
    </script>
</body>

</html>